<template>
    <div class="content">
        <TableLayout form-title="">
            <el-form :model="formInline" class="formInline" label-width="100px" :rules="rules"  ref="formInline" slot="form" v-collapse="true">          
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="所属省" prop="fProvinceId">
                            <province v-model="formInline.fProvinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属市">
                            <city v-model="formInline.fCityId" :province="formInline.fProvinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属区县">
                            <region v-model="formInline.fAreaId" :city="formInline.fCityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校名称">
                            <school v-model="formInline.schoolName" :provinceId="formInline.fProvinceId" :cityId="formInline.fCityId" :areaId="formInline.fAreaId" style="width:100%" @change='schoolChange'></school>
                        </el-form-item>
                    </el-col> 
                    <el-col :span="8">
                        <el-form-item label="负责人">
                                <el-input v-model="formInline.userName" placeholder="请输入内容" :maxlength="10"></el-input>
                        </el-form-item>
                    </el-col> 
                    <el-col :span="8">
                        <el-form-item label="家长手机号" prop="sPayUserPhone">
                                <el-input v-model="formInline.sPayUserPhone" placeholder="请输入内容" :maxlength="11"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="时间类型">
                            <el-select v-model="formInline.timeType" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in formInline.timeTypeList" :key="item.pId" :label="item.sName" :value="item.pId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="formInline.timeType=='0'">
                        <el-form-item label="按月份">
                            <el-date-picker v-model="formInline.dateNum" :editable="false" type="month" format="yyyy-MM" placeholder="选择月份" :picker-options="formInline.pickerOptions1" style="width:100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="formInline.timeType=='1'">
                        <el-form-item label="按天查询">
                            <el-date-picker v-model="formInline.dateNum" :editable="false" type="date" placeholder="选择日期" :picker-options="formInline.pickerOptions1" style="width:100%"></el-date-picker>
                        </el-form-item>
                    </el-col>                 
                </el-row>
                <div class="top-line">
                    <el-button type="primary" @click="onSubmit('formInline')">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="oder-info">               
                <el-row class="infomation">
                    <el-col :span="6">
                        <div class="info-name">订单量</div>
                        <div class="info-num">{{formInline.orderNum}}</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="info-name">销售总额 ¥</div>
                        <div class="info-num">{{formInline.totalMoney}}</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="info-name">e学云分成 ¥</div>
                        <div class="info-num">{{formInline.eXueMoney}}</div>
                    </el-col>
                    <el-col :span="6">
                        <div class="info-name">经销商分成 ¥</div>
                        <div class="info-num">{{formInline.agentMoney}}</div>
                    </el-col>
                </el-row>
            </div>
            <div class="table-title" slot="table-title">               
            </div>
            <el-table :data="dataApply" style="width: 100%" border @selection-change="handleSelectionChange" v-loading="loading" ref="multipleTable">

                <el-table-column label="负责人" align="center"  prop="schoolName">
                    <template scope="scope">
                        <span>{{scope.row.userName | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="学校名称" align="center"  prop="schoolName">
                    <template scope="scope">
                        <span>{{scope.row.sSchoolName | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="付款人姓名" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sPayUserName | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="家长手机号" align="center"  prop="schoolName">
                    <template scope="scope">
                        <span>{{scope.row.sPayUserPhone | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="购买月数" align="center" prop="schoolType" width="100">
                    <template scope="scope">
                        <span>{{scope.row.sMonth | isNull}}</span>
                    </template>
                </el-table-column>
 
                <el-table-column label="支付时间" align="center" prop="belongToArea" width="170">
                    <template scope="scope">
                        <span>{{scope.row.sCreateTime | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="支付方式" align="center" prop="detail">
                    <template scope="scope">
                        <span>{{scope.row.sPayType == '1' ? 'e学云' : scope.row.sPayType == '2' ? '支付宝' : scope.row.sPayType == '3' ? '微信' : '激活码' }}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="支付金额 ¥" align="center" prop="createTime"> 
                    <template scope="scope">
                        <span>{{scope.row.sMoney | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column align="center" label="经销商分成比例" prop="creatorName">
                    <template scope="scope">
                        <span>{{scope.row.sDividedPercentage | isNull}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="经销商分成 ¥" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sDividedMoney | isNull}}</span>
                    </template>                 
                </el-table-column>
                
                <el-table-column align="center" label="订单号">
                    <template scope="scope">
                        <span>{{scope.row.sOrderNum | isNull}}</span>
                    </template>  
                </el-table-column>
           
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="+listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>
 
<script>
import { pagePackageMemberShipPayDetail, countPackageMemberShipPayDetail} from 'api/memberMangement';
import TableLayout from './index';
import { mapState, mapActions, mapGetters } from 'vuex';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import school from 'components/SchoolClasss/school';
import moment from 'moment';
import validate from '@/utils/validate';

export default{
    components: {TableLayout, province, city, region, school},
    data() {
        return {
            formInline: {// form表单数据
                userName: '',
                fProvinceId: '',
                fAreaId: '',
                fCityId: '',
                sPayUserPhone: '',
                schoolId: '',
                schoolName: '',
                dateNum: new Date(),
                totalMoney: '--',
                orderNum: '--',
                onlineOrderNum: '--',
                activationCodeOrderNum: '--',
                eXueMoney: '--',
                agentMoney: '--',
                pickerOptions1: '',
                timeTypeList: [
                    {
                        sName: '按月查询',
                        pId: '0'
                    },
                    {
                        sName: '按天查询',
                        pId: '1'
                    }
                ],
                timeType: '0'
            },
            dataApply: [],
            dataNum: 1, // 表格1显示条数，初始为1
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            loading: false,
            rules: {
                sPayUserPhone: [...validate.phone()]
            }
        }
    },
   
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        }),
        ...mapGetters([
            'uid'
        ])
    },
    // 初始化
    created() {
        this.searchFetchData();
        this.getCountVip();
    },
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 获取学校id
        schoolChange(val) {
            this.formInline.schoolId = val
        },
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        },
        // 查询列表
        searchFetchData() {
            this.loading = true;
            let month = '';
            if (this.formInline.timeType=='0') {
                month = this.formInline.dateNum==''?'':moment(this.formInline.dateNum).format('YYYY-MM');
            } else {
                month = this.formInline.dateNum==''?'':moment(this.formInline.dateNum).format('YYYY-MM-DD');
            }
            pagePackageMemberShipPayDetail(this.listQuery.page, this.config.pageSize, this.formInline.fProvinceId, this.formInline.fCityId, this.formInline.fAreaId, this.formInline.userName, this.formInline.schoolId, this.formInline.sPayUserPhone, month, this.formInline.timeType).then(response => {              
                this.dataApply = response.data.content.list;
                this.listQuery.total = response.data.content.pagination.total;
                this.loading = false;
            });
        },
        changeType() {
            this.formInline.dateNum = '';
        },
        // 统计会员订单
        getCountVip() {
            let month = '';
            if (this.formInline.timeType=='0') {
                month = this.formInline.dateNum==''?'':moment(this.formInline.dateNum).format('YYYY-MM');
            } else {
                month = this.formInline.dateNum==''?'':moment(this.formInline.dateNum).format('YYYY-MM-DD');
            }
            countPackageMemberShipPayDetail(this.formInline.fProvinceId, this.formInline.fCityId, this.formInline.fAreaId, this.formInline.userName, this.formInline.schoolId, this.formInline.sPayUserPhone, month, this.formInline.timeType).then(response => {              
                this.formInline.totalMoney = response.data.content.totalMoney;
                this.formInline.orderNum = response.data.content.onlineOrderNum;
                this.formInline.eXueMoney = response.data.content.eXueMoney;
                this.formInline.agentMoney = response.data.content.agentMoney;
            });
        },
        // 表单查询
        onSubmit() {
            this.$refs['formInline'].validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.searchFetchData();
                    this.getCountVip();
                } else {
                    return false;
                }
            });
        }
 
    }
}
</script>
<style lang="scss" scoped>
 
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    label{
        text-align:left;
    }
    .el-tag{
            margin-left:5px;
            background:#f9f9f9;
            color:#444;
        }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .table-box{
        color: #333;
        font-size: 14px;
        padding: 10px 0;
        line-height: 20px;
    }
    .info-name{
        font-size: 17px;
        color: #999;
        padding-bottom:33px
    }
    .info-num{
        font-size: 25px;
        color: #343434;
    }
    .infomation{
        width:100%;
        text-align:center;
    }
}
</style>